<template>
  <div class="sign-panel">
    <el-tabs v-model="activeTab" class="sign-tabs">
      <el-tab-pane label="签名" name="sign">
        <div class="sign-row">
          <span class="sign-label">签字</span>
          <div class="sign-upload" v-if="!signUrl">
            <div class="sign-upload-box" @click="uploadSign">
              <svg width="32" height="32" viewBox="0 0 32 32"><g fill="none" fill-rule="evenodd"><rect width="32" height="32" rx="6" fill="#F5F7FA"/><path d="M16 8v10m0 0l-4-4m4 4l4-4" stroke="#C0C4CC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="8" y="22" width="16" height="2" rx="1" fill="#C0C4CC"/></g></svg>
              <div class="sign-upload-text">请上传签名</div>
            </div>
            <input ref="fileInput" type="file" accept="image/*" style="display:none" @change="onFileChange" />
          </div>
          <div class="sign-preview" v-else>
            <img :src="signUrl" class="sign-img" />
            <el-button class="sign-btn" type="primary" @click="editSign">修改</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="药品" name="drug">
        <div style="padding: 40px 0; color: #bbb; text-align: center;">药品内容占位</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const activeTab = ref('sign');
const signUrl = ref('');
const fileInput = ref<HTMLInputElement | null>(null);

function uploadSign() {
  fileInput.value?.click();
}
function onFileChange(e: Event) {
  const files = (e.target as HTMLInputElement).files;
  if (files && files[0]) {
    const reader = new FileReader();
    reader.onload = (ev) => {
      signUrl.value = ev.target?.result as string;
    };
    reader.readAsDataURL(files[0]);
  }
}
function editSign() {
  signUrl.value = '';
}
</script>

<style scoped>
.sign-panel {
  background: #fff;
  border-radius: 8px;
  min-height: 600px;
  padding: 24px 0 0 0;
}
.sign-tabs {
  --el-tabs-header-height: 48px;
  --el-tabs-header-bg-color: #fff;
  --el-tabs-active-color: #18b3ab;
  --el-tabs-header-font-size: 18px;
  --el-tabs-header-font-weight: 600;
  --el-tabs-header-border-bottom: 1px solid #e4e7ed;
  margin-left: 16px;
}
.sign-row {
  display: flex;
  align-items: flex-start;
  margin-top: 48px;
  margin-left: 60px;
}
.sign-label {
  font-size: 16px;
  color: #666;
  width: 60px;
  margin-top: 12px;
  flex-shrink: 0;
}
.sign-upload {
  margin-left: 32px;
}
.sign-upload-box {
  width: 260px;
  height: 100px;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px dashed #e4e7ed;
  transition: border 0.2s;
}
.sign-upload-box:hover {
  border: 1.5px solid #18b3ab;
}
.sign-upload-text {
  color: #bbb;
  font-size: 15px;
  margin-top: 8px;
}
.sign-preview {
  display: flex;
  align-items: center;
  margin-left: 32px;
}
.sign-img {
  height: 80px;
  max-width: 220px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #e4e7ed;
  margin-right: 18px;
}
.sign-btn {
  height: 32px;
  font-size: 15px;
  padding: 0 18px;
  border-radius: 4px;
  background: #18b3ab;
  color: #fff;
  border: none;
}
</style>
